<template>
  <div>
    <div class="warnningTip">
      <i
        class="el-icon-warning-outline"
      />常规课：区别于私教课，常规课为单次购买体系上课。区分长期课和团体课，长期课为小班制支持分班排课，团体课为大班制不分班统一排课。
    </div>
    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @handleQuery="getList(1)"
      @clear="clearList"
    />
    <div v-if="meta.indexOf('OfflinecoursesAdd') > -1" class="doumee_table_header">
      <el-button
        type="primary"
        @click="courseAdd()"
      >新增</el-button>
    </div>
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-tableb"
    >
      <el-table-column
        align="center"
        label="课程名称"
        min-width="200"
        prop="courseName"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span
            v-if="meta.indexOf('InfoCourse') > -1"
            class="primaryColor sbxf"
            @click="showDetail(scope.row)"
          >{{ scope.row.courseName }}</span>
          <span v-else class="wzZts sbxf">{{ scope.row.courseName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="课程图片"
        min-width="200"
        prop="courseImage"
      >
        <template slot-scope="scope">
          <el-image
            style="width: 60px"
            fit="contain"
            :src="scope.row.courseImage"
            :preview-src-list="[scope.row.courseImage]"
          />
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="授课教练"
        prop="teacherName"
        min-width="200"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="课程类型"
        prop="courseType"
        min-width="100"
      >
        <template slot-scope="scope">
          {{
            scope.row.courseType == "1"
              ? "团体课"
              : scope.row.courseType == "2"
                ? "私教课"
                : scope.row.courseType == "3"
                  ? "长期课"
                  : ""
          }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="课程地点"
        min-width="200"
        prop="site"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="课程人数(人)"
        prop="peopleNum"
        show-overflow-tooltip
        min-width="100"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.numLimit == 1">不限</span>
          <span v-else>{{ scope.row.peopleNum }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="报名人数"
        min-width="100"
        prop="joinNum"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="课时总价(元)"
        prop="price"
        min-width="100"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="课时数"
        min-width="100"
        prop="classNum"
      />
      <el-table-column
        align="center"
        label="开课日期"
        min-width="160"
        prop="beginDate"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="报名截止时间"
        min-width="160"
        prop="endTime"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="排序码"
        min-width="80"
        prop="sortNum"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="创建时间"
        min-width="160"
        show-overflow-tooltip
        prop="createTime"
      />
      <el-table-column
        align="center"
        label="状态"
        prop="status"
        fixed="right"
        min-width="120"
      >
        <template slot-scope="scope">
          {{
            scope.row.status == "1"
              ? "待发布/下架"
              : scope.row.status == "2"
                ? "报名中"
                : scope.row.status == "3"
                  ? "报名已截止"
                  : scope.row.status == "4"
                    ? "进行中"
                    : scope.row.status == "5"
                      ? "已结束"
                      : "已取消"
          }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        min-width="260"
        align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <div class="flex-cc">
            <el-button
              v-if="scope.row.status != '5' && scope.row.status != '6' && meta.indexOf('OfflinecoursesEdit') > -1"
              type="text"
              @click="courseAdd(scope.row)"
            >编辑</el-button>
            <el-button
              v-if="meta.indexOf('OfflinecoursesAdd') > -1"
              type="text"
              @click="handleCopy(scope.row)"
            >复制</el-button>
            <template v-if="meta.indexOf('courseDel') > -1">
              <el-button
                v-if="scope.row.status == 1 || scope.row.status == 6"
                type="text"
                class="secondColor"
                @click="courseRowDel(scope.row)"
              >删除</el-button>
            </template>
            <el-button
              v-if="scope.row.status == '1' && meta.indexOf('OfflinecoursesStatus') > -1"
              v-preventReClick
              type="text"
              @click="updateStatus(scope.row, 1)"
            >发布</el-button>
            <template v-if="meta.indexOf('OfflinecoursesClose') > -1">
              <el-button
                v-if="scope.row.status == 2 || scope.row.status == 3"
                type="text"
                @click="ShowCourseEnd(scope.row)"
              >取消课程</el-button>
            </template>
            <template v-if="scope.row.courseType == '3' && meta.indexOf('CourseClassList') > -1">
              <el-button
                v-if="scope.row.status == '2' || scope.row.status == '3' || scope.row.status == '4' || scope.row.status == '5'"
                type="text"
                @click="courseClassSortClick(scope.row)"
              >分班排课</el-button>
            </template>
            <template v-if="scope.row.courseType == '1' && meta.indexOf('Schedule') > -1">
              <el-button
                v-if="scope.row.status == '2' || scope.row.status == '3' || scope.row.status == '4' || scope.row.status == '5'"
                type="text"
                @click="courseSortClick(scope.row)"
              >排课</el-button>
            </template>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Paginations
      :total="total"
      :page="pagination.page"
      @current-change="getList"
      @SizeChange="handleSizeChange"
    />
    <el-dialog
      :title="kssj ? '修改上课开始日期' : '修改报名截止日期'"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      :visible.sync="showDate"
    >
      <el-form ref="ruleForm" :model="form" label-width="120px" :rules="rules">
        <el-form-item v-if="kssj" prop="beginDate" label="上课开始日期">
          <el-date-picker
            v-model="form.beginDate"
            :picker-options="pickerOptions"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择上课开始日期"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item v-if="!kssj" prop="endTime" label="报名截止日期">
          <el-date-picker
            v-model="form.endTime"
            :picker-options="pickerOptions"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择报名截止日期"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item v-if="!kssj" prop="endTimeb" label="报名截止时间">
          <el-time-picker
            v-model="form.endTimeb"
            format="HH:mm:ss"
            value-format="HH:mm:ss"
            placeholder="请选择报名截止时间"
            style="width: 100%"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDate = false">取消</el-button>
        <el-button
          v-preventReClick
          type="primary"
          @click="onSubmit"
        >确定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="报名"
      :visible.sync="showSignUpAdd"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      @close="closeMessage"
    >
      <el-form
        ref="form"
        class="doumee-form"
        :model="param"
        label-width="80px"
        :rules="rules"
      >
        <el-form-item label="课程信息">
          <span class="messgae-style">线下课程：</span>
          <span class="messgae-style">【{{ param.courseItem }}】</span>
          <span class="messgae-style">，{{ param.price }}元</span>
        </el-form-item>
        <el-form-item label="课程金额">
          <span class="price-style messgae-style">{{ param.price }}</span>
          <span class="messgae-style unit-style">元</span>
        </el-form-item>
        <el-form-item label="会员卡号" prop="cardNum">
          <div style="width: 70%">
            <el-input
              v-model="param.cardNum"
              placeholder="请输入卡号/手机号"
              class="input-with-select bottom-speace-style"
              @keyup.enter.native="searchAction"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="searchAction"
              />
            </el-input>
            <div v-if="showMessage" class="card-message">
              <div class="first-line">
                <span class="message-title-style">NO.</span>
                <span class="message-value-style">{{
                  cardMessage.number
                }}</span>
                <span class="message-value-style">{{
                  cardMessage.nickName
                }}</span>
                <span v-if="cardMessage.cardName" class="card-name-style">{{
                  cardMessage.cardName
                }}</span>
                <button
                  class="message-title-style close-style"
                  @click="closeMessage"
                >
                  x
                </button>
              </div>
              <div class="first-line">
                <span class="message-title-style">手机：</span>
                <span class="message-value-style">{{ cardMessage.phone }}</span>
                <span class="message-title-style">充值金额：</span>
                <span class="message-value-style">
                  <!-- {{ cardMessage.remainingMoney ? cardMessage.remainingMoney : 0 }} -->
                  {{
                    cardMessage.remainingMoney ? cardMessage.remainingMoney : 0
                  }}
                </span>
                <span class="message-title-style">赠送金额：</span>
                <span class="message-value-style">
                  {{
                    cardMessage.remainingGiveMoney
                      ? cardMessage.remainingGiveMoney
                      : 0
                  }}
                </span>
                <!-- <span class="message-title-style">余额：</span>
                <span class="message-value-style">{{ cardMessage.money }}</span> -->
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item v-if="showMessage" prop="name" label="姓名">
          <el-input
            v-model="param.name"
            clearable
            placeholder="请输入联系人姓名"
          />
        </el-form-item>
        <el-form-item v-if="showMessage" prop="phone" label="电话">
          <el-input
            v-model="param.phone"
            clearable
            placeholder="请输入联系人电话"
          />
        </el-form-item>
        <div class="add-item">
          <div
            v-for="(item, index) in param.members"
            :key="item.id"
            class="add-item-members"
          >
            <div class="content">
              <div v-if="item.id">
                <el-checkbox v-model="item.checked" class="checkbox" />
                <span class="name">{{ item.name }}</span>
                <!-- <el-input
                  v-model="item.name"
                  class="name"
                  :disabled="item.commit"
                  placeholder="学员姓名"
                /> -->
                <span class="identitycard">{{ item.idCard }}</span>
                <!-- <el-input
                  v-model="item.idCard"
                  class="identitycard"
                  :disabled="item.commit"
                  placeholder="学员身份证号"
                /> -->
                <span class="data-picker-style">{{ item.birthday }}</span>
                <!-- <el-date-picker
                  v-model="item.birthday"
                  type="date"
                  placeholder="选择出生日期"
                  value-format="yyyy-MM-dd"
                  class="data-picker-style"
                  clearable
                  :disabled="item.commit"
                  :picker-options="birthPickerOptions"
                  :editable="false"
                /> -->
                <span class="sex">{{
                  item.sex == 0 ? "保密" : item.sex == 1 ? "男" : "女"
                }}</span>
                <!-- <el-select
                  v-model="item.sex"
                  class="sex"
                  :disabled="item.commit"
                  placeholder="性别"
                >
                  <el-option
                    v-for="sexsel in sexList"
                    :key="sexsel.value"
                    :label="sexsel.label"
                    :value="sexsel.value"
                  />
                </el-select> -->
              </div>
              <div v-else>
                <el-checkbox
                  v-model="item.checked"
                  class="checkbox"
                  :disabled="!item.id"
                />
                <el-input
                  v-model="item.name"
                  class="name"
                  :disabled="item.commit"
                  maxlength="20"
                  placeholder="学员姓名"
                />
                <el-input
                  v-model="item.idCard"
                  class="identitycard"
                  :disabled="item.commit"
                  maxlength="18"
                  placeholder="学员身份证号"
                />
                <el-date-picker
                  v-model="item.birthday"
                  type="date"
                  placeholder="选择出生日期"
                  value-format="yyyy-MM-dd"
                  class="data-picker-style"
                  clearable
                  :disabled="item.commit"
                  :picker-options="birthPickerOptions"
                  :editable="false"
                />
                <el-select
                  v-model="item.sex"
                  class="sex"
                  :disabled="item.commit"
                  placeholder="性别"
                >
                  <el-option
                    v-for="sexsel in sexList"
                    :key="sexsel.value"
                    :label="sexsel.label"
                    :value="sexsel.value"
                  />
                </el-select>
              </div>
              <el-button
                v-if="!item.id"
                class="btnitem"
                type="text"
                @click="saveItem(item, index)"
              >保存</el-button>
            </div>
          </div>
          <el-button
            class="btnitem"
            type="text"
            @click="addItem()"
          >添加</el-button>
        </div>
        <el-form-item prop="mark" label="备注信息">
          <el-input
            v-model="param.mark"
            clearable
            placeholder="请输入备注信息"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancleSignUp">取消</el-button>
        <el-button type="primary" @click="confirmSignUp">去支付</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="编辑学员"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      :visible.sync="showStudent"
    >
      <el-form
        ref="formStudent"
        :model="formStudent"
        label-width="120px"
        :rules="ruleb"
      >
        <el-form-item prop="name" label="学员姓名">
          <el-input
            v-model="formStudent.name"
            maxlength="20"
            placeholder="请输入学员姓名"
            clearable
          />
        </el-form-item>
        <el-form-item prop="sex" label="性别">
          <el-select
            v-model="formStudent.sex"
            style="width: 100%"
            placeholder="请选择性别"
          >
            <el-option
              v-for="sexsel in sexList"
              :key="sexsel.value"
              :label="sexsel.label"
              :value="sexsel.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="cardNo" label="学员证件名">
          <el-input
            v-model="formStudent.cardNo"
            maxlength="18"
            placeholder="请输入学员证件名"
            clearable
          />
        </el-form-item>
        <el-form-item prop="birthday" label="出生日期">
          <el-date-picker
            v-model="formStudent.birthday"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择出生日期"
            style="width: 100%"
          />
        </el-form-item>
        <!-- <el-form-item prop="termDate" label="到期日期">
          <el-date-picker
            v-model="formStudent.termDate"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="请选择到期日期"
            style="width: 100%"
          />
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showStudent = false">取消</el-button>
        <el-button
          v-preventReClick
          type="primary"
          @click="onSubmitb"
        >确定</el-button>
      </div>
    </el-dialog>

    <!--  取消课程 -->
    <el-dialog
      title="取消课程"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      :visible.sync="isShowCourseEnd"
    >
      <div class="cancel_wrap">
        <div class="h1">请选择取消类型</div>
        <el-radio v-model="cancelflag" label="1">取消课程</el-radio>
        <div class="placeholder9 ml20 mb20 mt10">因特殊原因，该课程无法继续进行，已报名学员会按原支付金额全额自动退款退课；</div>
        <el-radio v-model="cancelflag" label="2">结束课程</el-radio>
        <div class="placeholder9 ml20 mt10">课程完结，该课程无法继续报名，已报名学员可继续上课；</div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShowCourseEnd = false">取消</el-button>
        <el-button
          :loading="cancelLoading"
          type="primary"
          @click="cancelOnSubmitb"
        >确定</el-button>
      </div>
    </el-dialog>
    <orderDialog ref="child" @orderSuccess="getList" />
    <Detail v-if="isShowDetail" ref="DetailRef" :meta="meta" />
    <ScheduleCard v-if="isShowScheduleCard" ref="ScheduleCardRef" @close="isShowScheduleCard = false" />
    <CourseClassSort v-if="isShowClass" ref="CourseClassSortRef" :meta="meta" @close="isShowClass = false" />
    <CourseAdd v-if="isShowCourseAdd" ref="courseAddRef" @success="getList()" @close="isShowCourseAdd = false" />
  </div>
</template>

<script>
import { parseTime } from '@/utils/index'
import orderDialog from '@/components/order'
import QueryForm from '@/components/QueryForm'
import Detail from './components/detail'
import CourseAdd from './components/offlinecoursesAdd'
import ScheduleCard from '../../../scheduleCard'
import CourseClassSort from './components/courseClassSort.vue'
import {
  getAreaList,
  spaceList,
  getProjectList,
  listCourse,
  kcStudentList,
  kcStudentEdit,
  cancelReserve,
  unsubscribeOrder,
  deleteUserReserveRecord,
  teacherList,
  updateStatusCourse,
  closeCourse,
  VIPInfo,
  studentAdd,
  studentListByMember,
  courseCommonDel
} from '@/api'
import store from '@/store'
import { queryFormConfig } from './config'
export default {
  components: {
    orderDialog,
    QueryForm,
    Detail,
    CourseAdd,
    ScheduleCard,
    CourseClassSort
  },
  props: {
    meta: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      isShowDetail: false,
      isShowCourseAdd: false,
      isShowClass: false,
      isShowCourseEnd: false,
      cancelLoading: false,
      isShowScheduleCard: false,
      rowTemp: {},
      cancelflag: '1',

      pickerOptions: {
        disabledDate(time) {
          return (
            time.getTime() < new Date(new Date().toLocaleDateString()).getTime()
          )
        }
      },
      birthPickerOptions: {
        disabledDate(time) {
          return (
            time.getTime() > new Date(new Date().toLocaleDateString()).getTime()
          )
        }
      },
      queryFormConfig,
      modalDialog: store.getters.dialog,
      tableChangeData: [],
      totalNo: 0,
      studentForm: {},
      showStudent: false,
      formStudent: {},
      list: [],
      pagination: {
        page: 1,
        rows: 10
      },
      paginationb: {
        page: 1,
        rows: 10
      },
      total: 0,
      sexList: [
        { value: '0', label: '保密' },
        { value: '1', label: '男' },
        { value: '2', label: '女' }
      ],
      filters: {},
      listLoading: true,
      showPayment: false,
      // member: '',
      payMethod: '',
      payPwd: '',
      details: {},
      change: 0,
      changePrice: '',
      cardFk: '',
      venueId: sessionStorage.getItem('venueId'),
      cqList: [],
      cdList: [],
      showDate: false,
      listLoadings: false,
      kssj: false,
      form: {},
      rules: {
        endTime: [{ required: true, message: '请选择报名截止日期', trigger: 'change' }],
        endTimeb: [{ required: true, message: '请选择报名截止时间', trigger: 'change' }],
        beginDate: [{ required: true, message: '请选择开课日期', trigger: 'change' }],
        name: [{ required: true, message: '请输入联系人姓名', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入联系人电话', trigger: 'blur' }]
      },
      ruleb: {
        name: [{ required: true, message: '请输入学员姓名', trigger: 'blur' }]
      },
      showSignUpAdd: false,
      param: {
        members: [{}],
        name: '',
        phone: ''
      },
      detail: {},
      cardNum: null,
      showMessage: false,
      cardMessage: {},
      formRules: {
        name: [{ required: true, message: '请输入学员姓名', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.$refs.table.doLayout()
  },
  activated() {
    this.$refs.table.doLayout()
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.getList(1)
    this.toGetAreaList()
    // this.toGetProjectList()
    this.getTeachList()
  },
  methods: {
    courseAdd(row) {
      this.isShowCourseAdd = true
      this.$nextTick(() => {
        if (row && row.courseId) {
          this.$refs.courseAddRef.courseId = row.courseId
          this.$refs.courseAddRef.status = row.status
          this.$refs.courseAddRef.getDetail(row.courseId)
        } else {
          this.$refs.courseAddRef.getCardList()
        }
        this.$refs.courseAddRef.isShowDrawer = true
      })
    },
    handleCopy(row) {
      this.isShowCourseAdd = true
      this.$nextTick(() => {
        if (row && row.courseId) {
          // this.$refs.courseAddRef.courseId = row.courseId
          this.$refs.courseAddRef.status = row.status
          this.$refs.courseAddRef.getDetail(row.courseId)
        } else {
          this.$refs.courseAddRef.getCardList()
        }
        this.$refs.courseAddRef.isShowDrawer = true
      })
    },
    courseSortClick(row) {
      this.isShowScheduleCard = true
      this.$nextTick(() => {
        this.$refs.ScheduleCardRef.isShowDrawer = true
        this.$refs.ScheduleCardRef.teacherId = row.teacherId
        this.$refs.ScheduleCardRef.site = row.site
        this.$refs.ScheduleCardRef.courseId = row.courseId
        this.$refs.ScheduleCardRef.getList()
      })
    },
    courseClassSortClick(row) {
      this.isShowClass = true
      this.$nextTick(() => {
        this.$refs.CourseClassSortRef.isShowModal = true
        this.$refs.CourseClassSortRef.courseId = row.courseId
        this.$refs.CourseClassSortRef.teacherId = row.teacherId
        this.$refs.CourseClassSortRef.site = row.site
        this.$refs.CourseClassSortRef.courseName = row.courseName
        this.$refs.CourseClassSortRef.getList()
      })
    },

    handleSizeChange(value) {
      this.pagination.rows = value
      this.getList(1)
    },
    clearFilter() {
      this.studentForm = {}
      this.getMembersList(1)
    },
    onSubmitb() {
      this.$refs.formStudent.validate((valid) => {
        if (valid) {
          const param = { ...this.formStudent }
          if (param.birthday) {
            param.birthday = param.birthday + ' 00:00:00'
          }
          kcStudentEdit({
            param
          })
            .then((res) => {
              if (res.errorCode === '000000') {
                this.$message.success('修改成功')
                this.showStudent = false
                this.getMembersList(1)
              }
            })
            .catch((err) => {
              console.log(err)
            })
        }
      })
    },
    editStudent(row) {
      const obj = { ...row }
      if (obj.birthday) {
        obj.birthday = obj.birthday.slice(0, 10)
      }
      this.formStudent = obj
      this.showStudent = true
    },
    handleSizeChangeb(value) {
      this.paginationb.rows = value
      this.getMembersList(1)
    },
    // 前端分页+模糊查询
    getMembersList(page) {
      const { studentForm } = this
      const pagination = this.paginationb
      const venueId = sessionStorage.getItem('venueId')
      if (page) {
        pagination.page = page
      }
      pagination.firstQueryTime = parseTime(new Date())
      this.paginationb = pagination
      studentForm.courseId = this.detail.courseId
      kcStudentList({ pagination, param: { venueId, ...studentForm }})
        .then((res) => {
          this.listLoadings = false
          if (res.errorCode !== '000000') return
          this.tableChangeData = res.recordList
          this.totalNo = res.totalCount
        })
        .catch(() => {
          this.listLoadings = false
        })
    },
    showDetail(row) {
      this.isShowDetail = true
      this.$nextTick(() => {
        this.$refs.DetailRef.showDetail(row)
      })
    },
    addItem() {
      const members = this.param.members
      members.push({})
      // this.param.members = members
      this.$set(this.param, 'members', members)
    },
    saveItem(item, index) {
      console.log(item, index)
      const param = item
      if (!this.cardMessage.id) {
        this.$message.error('请先输入卡号/手机号搜索会员')
        return
      }
      if (!param.name) {
        this.$message.error('请输入学员姓名')
        return
      }
      // if (!param.idCard) {
      //   this.$message.error('请输入身份证号')
      //   return
      // }
      // if (!param.birthday) {
      //   this.$message.error('请选择出生日期')
      //   return
      // }
      if (!param.sex) {
        this.$message.error('请选择性别')
        return
      }
      param.memberId = this.cardMessage.id
      studentAdd({
        param
      })
        .then((res) => {
          if (res.errorCode === '000000') {
            this.$message.success('添加成功')
            this.$set(this.param.members[index], 'commit', '1')
            this.$set(this.param.members[index], 'id', res.record)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    closeMessage() {
      this.showMessage = false
      this.cardMessage = {}
      this.$refs.form.resetFields()
      this.$set(this.param, 'members', [])
      this.cardNum = ''
    },
    cancleSignUp() {
      this.showSignUpAdd = false
    },
    confirmSignUp() {
      const members = [...this.param.members]
      const students = members.filter(item => item.checked && item.id)
      const ids = students.map(item => item.id)
      // for (const item of members) {
      //   if (item.checked && item.id) {
      //     ids.push(item.id)
      //     count++
      //   }
      // }
      if (ids.length === 0) {
        this.$message.error('请添加并保存学员信息')
        return
      }
      // debugger
      const param = {
        ...this.param,
        userName: this.param.name,
        memberId: this.cardMessage.id,
        students: ids.join()
      }
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.showSignUpAdd = false
          this.$refs.child.continuePay(param, 'studentAdd')
        }
      })
    },
    searchAction() {
      // console.log('搜索会员卡')
      if (!this.param.cardNum.length) {
        this.$message.error('请输卡号/手机号')
        return
      }
      VIPInfo({
        param: {
          phoneOrNo: this.param.cardNum
        }
      }).then(res => {
        // console.log(res)
        // debugger
        if (res.errorCode === '000000') {
          this.cardMessage = res.record
          this.$set(this.param, 'name', this.cardMessage.realName || this.cardMessage.nickName)
          this.$set(this.param, 'phone', this.cardMessage.phone)
          this.getStuList(res.record.id)
          this.showMessage = true
        }
      }).catch(err => {
        console.log(err)
        // debugger
        this.cardMessage = {}
        this.showMessage = false
      })
    },
    getStuList(memberId) {
      studentListByMember({
        param: {
          memberId
        }
      })
        .then(res => {
          // console.log(res)
          this.param.members = res.recordList
        })
        .catch(err => {
          console.log(err)
        })
    },
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const param = { ...this.form }
          if (!this.kssj) {
            param.endTime = param.endTime + ' ' + param.endTimeb
            param.operation = '2'
          } else {
            param.operation = '3'
          }
          updateStatusCourse({
            param
          })
            .then((res) => {
              if (res.errorCode === '000000') {
                this.$message.success('修改成功')
                this.showDate = false
                this.getList(1)
              }
            })
            .catch((err) => {
              console.log(err)
            })
        }
      })
    },
    updateDate(e, b) {
      this.showDate = true
      if (b === 1) {
        this.kssj = false
        this.form = {
          courseId: e.courseId,
          endTime: e.endTime.slice(0, 10),
          endTimeb: e.endTime.slice(11, 21)
        }
      } else {
        this.kssj = true
        this.form = {
          courseId: e.courseId,
          beginDate: e.beginDate
        }
      }
    },
    ShowCourseEnd(row) {
      this.rowTemp = row
      this.isShowCourseEnd = true
    },
    cancelOnSubmitb() {
      const fn = this.cancelflag === '1' ? this.closeCourse : this.endCourse
      this.cancelLoading = true
      fn()
    },
    closeCourse() {
      closeCourse({ param: { courseId: this.rowTemp.courseId }})
        .then((res) => {
          this.cancelLoading = false
          if (res.errorCode === '000000') {
            this.$message.success('取消课程成功')
            this.isShowCourseEnd = false
            this.getList()
          }
        }, () => {
          this.cancelLoading = false
        })
    },
    endCourse() {
      closeCourse({ param: { courseId: this.rowTemp.courseId, endCourse: '1' }})
        .then((res) => {
          if (res.errorCode === '000000') {
            this.cancelLoading = false
            this.isShowCourseEnd = false
            this.$message.success('结束课程成功')
            this.getList()
          }
        }, () => {
          this.cancelLoading = false
        })
    },
    signUp(e) {
      this.param = { ...e, mark: '' }
      this.$set(this.param, 'members', [{}])
      this.showSignUpAdd = true
    },
    courseRowDel(row) {
      this.$confirm('确认删除, 是否继续', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        courseCommonDel({
          param: { courseId: row.courseId }
        }).then(res => {
          if (res.errorCode !== '000000') return
          this.$message.success('删除成功')
          this.getList()
        })
      })
    },
    updateStatus(e, index) {
      let str = ''
      const that = this
      if (index === 1) {
        str = '确认发布, 是否继续?'
      }
      this.$confirm(str, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          updateStatusCourse({
            param: { courseId: e.courseId, operation: index }
          })
            .then((res) => {
              if (res.errorCode === '000000') {
                if (index === 1) {
                  that.$message.success('发布成功')
                }
                that.getList(1)
              }
            })
        })
    },
    getTeachList() {
      const venueId = sessionStorage.getItem('venueId')
      teacherList({ param: { venueId, teacherType: '0', isOnJob: '1', status: '1' }})
        .then((res) => {
          if (res.errorCode !== '000000') return
          const arr = res.recordList
          arr.forEach(e => {
            e.label = e.teacherName
            e.value = e.teacherId
          })
          this.queryFormConfig.formItems[1].options = arr
        })
    },
    toGetProjectList() {
      const venueId = this.venueId
      getProjectList({ param: { venueId, status: '1' }})
        .then((res) => {
          if (res.errorCode !== '000000') return
          const arr = res.recordList
          arr.forEach(e => {
            e.label = e.projectName
            e.value = e.id
          })
          this.queryFormConfig.formItems[2].options = arr
        })
    },
    // 场区列表
    toGetAreaList() {
      const venueId = this.venueId
      getAreaList({ param: { venueId }})
        .then((res) => {
          this.cqList = res.recordList
        })
    },
    // 场地列表
    getSpaceList(id) {
      this.$set(this.filters, 'cd', '')
      spaceList({ param: { id }})
        .then((res) => {
          if (res.errorCode !== '000000') return
          this.cdList = res.recordList
        })
    },
    clearList() {
      this.filters = {}
      this.getList(1)
    },
    getList(page) {
      const { filters, pagination } = this
      const venueId = sessionStorage.getItem('venueId')
      if (page) {
        pagination.page = page
        this.pagination = pagination
      }
      pagination.firstQueryTime = parseTime(new Date())
      filters.flag = '2'
      this.listLoading = true
      listCourse({ pagination, param: { venueId, ...filters }})
        .then((res) => {
          this.listLoading = false
          if (res.errorCode !== '000000') return
          this.list = res.recordList
          this.total = res.totalCount
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    deletelBtn(e) {
      deleteUserReserveRecord({ param: { reserveAndOrderId: e.id }})
        .then((res) => {
          if (res.errorCode === '000000') {
            this.$message.success('删除成功')
            this.getList(1)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    cancelBtn(e) {
      cancelReserve({ param: { reserveAndOrderId: e.id }})
        .then((res) => {
          if (res.errorCode === '000000') {
            this.$message.success('取消预定成功')
            this.getList()
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    unsubscribeOrderBtn(e) {
      unsubscribeOrder({ param: { reserveAndOrderId: e.id }})
        .then((res) => {
          if (res.errorCode === '000000') {
            this.$message.success('场地退订成功')
            this.getList()
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    cancelPayment() {
      this.details = {}
      this.showPayment = false
      this.member = ''
      this.payMethod = '01'
      this.change = 0
      this.changePrice = ''
    },
    changePriceClick() {
      if (this.change === 0) {
        this.change = 1
      } else {
        this.change = 0
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.cancel_wrap{
  padding: 20px 100px;
  .h1{
    text-align: center;
    font-size: 18px;
    margin-bottom: 40px;
  }
}
.messgae-style {
  color: #dd0707;
}
.price-style {
  font-size: 17px;
  font-weight: 500;
}
.unit-style {
  margin-right: 20px;
}
.card-message {
  margin-bottom: 10px;
  background-color: #f2f2f2;
  height: 60px;
  line-height: 20px;
  .first-line {
    height: 30px;
    padding: 5px;
    .message-title-style {
      color: #999;
    }
    .card-name-style {
      display: inline-block;
      border: 1px #999 solid;
      border-radius: 4px;
      background-color: #fff;
      font-size: 12px;
      padding-left: 5px;
      padding-right: 5px;
      height: 20px;
      text-align: center;
    }
    .close-style {
      font-size: 20px;
      float: right;
      margin-right: 5px;
      margin-top: -2px;
      padding: 0;
      border: 0px #999 solid;
    }
    .message-value-style {
      margin-right: 15px;
      color: #222;
    }
  }
}
.add-item {
  .add-item-members {
    display: flex;
    margin-top: 10px;
    margin-left: 10px;
    .content {
      .checkbox {
        zoom: 250%;
        vertical-align: middle;
      }
      .name {
        margin-left: 10px;
        width: 100px;
      }
      .identitycard {
        margin-left: 10px;
        width: 180px;
      }
      .data-picker-style {
        margin-left: 10px;
        width: 150px;
      }
      .sex {
        margin-left: 10px;
        margin-right: 20px;
        width: 80px;
      }
    }
  }
}
.siteDetails {
  display: flex;
  flex-wrap: wrap;
  .form-item {
    width: 33.33%;
    display: flex;
    margin-right: 0%;
    margin-bottom: 5px;
    ::v-deep .el-form-item__content {
      flex: 1;
    }
    ::v-deep .el-date-editor {
      width: 100%;
    }
  }
}
</style>
